<template>
  <div class="dash" id="baogao">
    <div class="dash-top">
      <div class="dash-top-desc">
        <p>分析报告</p>
        <p>根据数据主题、时间、地域信息生成分析报告，直观展示数据信息</p>
      </div>
      <div class="dash-top-right" v-if="showBgBtn">
        <el-button type="primary" @click="downBg">下载报告</el-button>
      </div>
    </div>
    <div class="dashboard">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-card class="card user">
            <i class="el-icon-connection card-icon"></i>
            <h3 class="card-item">网站数量</h3>
            <h5 class="card-desc">{{ result.site_count || '-' }}</h5>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card app">
            <i class="el-icon-thumb card-icon"></i>
            <h3 class="card-item">爬取次数</h3>
            <h5 class="card-desc">{{ result.crawl_count || '-' }}</h5>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card channel">
            <i class="el-icon-cpu card-icon"></i>
            <h3 class="card-item">文章总数</h3>
            <h5 class="card-desc">{{ result.article_count || '-' }}</h5>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card release">
            <i class="el-icon-odometer card-icon"></i>
            <h3 class="card-item">广西文章占比</h3>
            <h5 class="card-desc">{{ (Number(result.gx_article_ratio || 0) * 100).toFixed(2) || '-' }}%</h5>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="dashboard-wrap">
      <!-- <h3 class="dashboard-wrap__title"><i class="dashboard-wrap__mark"></i>分析报告</h3> -->
      <div class="dashboard-charts">
        <el-row>
          <el-col :span="24" style="margin-bottom: 10px; min-height: 350px">
            <ChartMap v-if="mapshow" :mapData="result.country_data" />
          </el-col>
          <el-col :span="24">
            <ChartArticle :yeardata="result.year_data" v-if="mapshow" />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, watch, onMounted, nextTick } from 'vue';
import ChartMap from './components/chart-map.vue';
import ChartArticle from './components/chart-article.vue';
import { useStore } from 'vuex';
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';


export default defineComponent({
  name: 'dashboard',
  props: [],
  emits: [],
  components: { ChartArticle, ChartMap },
  setup(props, ctx) {
    const store = useStore();
    const mapshow = ref(true);
    const showBgBtn = ref(true);
    const result = reactive({
      article_count: '',
      year_data: [],
      country_data: [],
      crawl_count: '',
      gx_article_ratio: '',
      site_count: '',
    });

    const exportPdf = (id, title) => {
  const scale = 2;
  html2Canvas(document.querySelector(id), {
    allowTaint: true, // 开启跨域
    scale, // 提升画面质量，但是会增加文件大小
  }).then(function (canvas) {
    const contentWidth = canvas.width / scale;

    const contentHeight = canvas.height / scale;

    const PDF = new JsPDF('l', 'pt', [contentWidth, contentHeight]);

    const pageData = canvas.toDataURL('image/jpeg', 1.0);

    PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight);

    PDF.save(title + '.pdf');
    showBgBtn.value = true;
  });
}

    const crawlTaskConfirmDone = async () => {
      mapshow.value = false;
      const resu = await store.dispatch('task/crawlAnalysisQuery');
      Object.keys(result).map((item) => (result[item] = resu[item]));
      mapshow.value = true;
    };
    const downBg = () => {
      showBgBtn.value = false;
      nextTick(() => {
        exportPdf("#baogao", "分析报告_"+new Date().getTime());
      });
    };
    onMounted(() => {
      crawlTaskConfirmDone();
    });
    return {
      result,
      mapshow,
      showBgBtn,
      downBg,
    };
  },
});
</script>

<style lang="scss" scoped>
.dash-top {
  @extend %container;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  &-desc {
    display: flex;
    flex-direction: column;
    p {
      &:nth-child(1) {
        color: #282d30;
        font-size: 18px;
        font-weight: bold;
      }
      &:nth-child(2) {
        font-size: 12px;
        color: #848899;
        margin-top: 10px;
      }
    }
  }
  &-right {
    &::v-deep(.el-button) {
      background-color: #0054fe;
      border-color: #0054fe;
    }
  }
}
.dashboard {
  @extend %container;
  margin-bottom: 10px;
  &-wrap {
    width: 100%;
    min-width: 600px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    &__title {
      font-size: 18px;
      font-weight: bold;
      line-height: 30px;
      color: #333333;
      border-bottom: #f0f0f0 solid 1px;
      padding-bottom: 10px;
      margin: 0;
    }
    &__mark {
      display: inline-block;
      width: 4px;
      height: 12px;
      background: #0052d9;
      margin-right: 10px;
    }
  }
  &-charts {
    width: 100%;
  }
}
.el-row {
  .card {
    position: relative;
    &-item {
      font-size: 20px;
      color: #ffffff;
      line-height: 30px;
      font-weight: bold;
      margin: 0;
    }
    &-desc {
      position: relative;
      color: #ffffff;
      font-size: 18px;
      line-height: 30px;
      text-align: right;
      z-index: 1;
      font-weight: bold;
      margin: 0;
    }
    &-icon {
      font-size: 100px;
      color: #ffffff;
      position: absolute;
      right: 0px;
      top: 0px;
      transform: rotate(-45deg);
      z-index: 0;
      opacity: 0.13;
    }
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    margin-bottom: 20px;
  }
  .user {
    background-image: -webkit-linear-gradient(-90deg, #2559ea 0%, #c669f8 100%);
    background-image: linear-gradient(-90deg, #2559ea 0%, #c669f8 100%);
  }
  .app {
    background-image: -webkit-linear-gradient(-90deg, #ff5d77 0%, #f4cb61 100%);
    background-image: linear-gradient(-90deg, #ff5d77 0%, #f4cb61 100%);
  }
  .channel {
    background: -webkit-linear-gradient(-90deg, #50b897, #9cd15f);
    background: linear-gradient(-90deg, #50b897, #9cd15f);
  }
  .release {
    background: -webkit-linear-gradient(-90deg, #2f9aff, #6063ff);
    background: linear-gradient(-90deg, #2f9aff, #6063ff);
  }
}
</style>
